<template>
	<view class="my-comment">
		<!-- 导航栏 -->
		<nav-bar backUrl="/pages/my/my" :isTabbar="true"></nav-bar>
		<!-- 评价列表 -->
		<view class="comment-list">
			<view class="comment-item" v-for="(item, index) in commentList" :key="index">
				<!-- 服务信息 -->
				<view class="service-info">
					<view class="service-header">
						<text class="service-name">{{ item.project.projectName }}</text>
						<text class="service-date">{{ item.createTime }}</text>
					</view>
					<view class="service-meta">
						<text class="store">{{ item.store.storeName }}</text>
						<text class="technician">{{ item.technician.name }}</text>
					</view>
				</view>
				
				<!-- 评分展示 -->
				<view class="rating-info">
					<view class="rating-item" v-for="(rating, rIndex) in item.ratings" :key="rIndex">
						<image class="rating-icon" :src="getRatingIcon(rating.type)" mode="aspectFit"></image>
						<view class="stars">
							<text v-for="star in 5" :key="star" class="star" :class="{ active: star <= rating.score }">★</text>
						</view>
					</view>
				</view>
				
				<!-- 评价内容 -->
				<view class="comment-content">{{ item.commentContent }}</view>
				
				<!-- 媒体展示 -->
				<view class="media-list" v-if="item.mediaUrls">
					<!-- 图片展示 -->
					<image 
						v-for="(media, mediaIndex) in getMediaList(item.mediaUrls)"
						:key="mediaIndex"
						v-if="isImage(media)"
						:src="media"
						mode="aspectFill"
						class="comment-image"
						@tap="previewImage(getImageList(item.mediaUrls), getImageList(item.mediaUrls).indexOf(media))"
					></image>
					<!-- 视频展示 -->
					<video
						v-for="(media, mediaIndex) in getMediaList(item.mediaUrls)"
						:key="'video-'+mediaIndex"
						v-if="isVideo(media)"
						:src="media"
						class="comment-video"
						controls
					></video>
				</view>
			</view>
		</view>
		
		<!-- 无数据提示 -->
		<view class="empty-tip" v-if="commentList.length === 0">
			<image src="/static/icons/empty.png" mode="aspectFit"></image>
			<text>暂无评价</text>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
	data() {
		return {
			commentList: [],
			page: 1,
			limit: 10,
			hasMore: true
		}
	},
	
	onLoad() {
		this.loadComments()
	},
	
	// 下拉刷新
	onPullDownRefresh() {
		this.page = 1
		this.hasMore = true
		this.loadComments().then(() => {
			uni.stopPullDownRefresh()
		})
	},
	
	// 上拉加载更多
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.loadComments()
		}
	},
	
	methods: {
		// 加载评价列表
		async loadComments() {
			try {
				const userInfoStr = uni.getStorageSync('userInfo')
				let userInfo = null
				
				if (userInfoStr) {
				  try {
				    // 如果是字符串，尝试解析
				    if (typeof userInfoStr === 'string') {
				      const parsed = JSON.parse(userInfoStr)
				      // 检查是否是登录响应格式
				      if (parsed.code === 200 && parsed.data) {
				        userInfo = parsed.data
				      } else {
				        userInfo = parsed
				      }
				    } else {
				      // 如果不是字符串，直接使用
				      userInfo = userInfoStr
				    }
				  } catch (e) {
				    console.error('解析用户信息失败', e)
				    // 解析失败时，尝试直接使用
				    userInfo = userInfoStr
				  }
				}
				const userId = userInfo.memberId
				const res = await uni.request({
					url: `${uni.$config.baseUrl}/comments/comments/list`,
					method: 'GET',
					data: {
						userId: userId
					}
				})
				
				if (res.data.code === 200) {
					const { rows, total } = res.data
					if (this.page === 1) {
						this.commentList = rows
					} else {
						this.commentList = [...this.commentList, ...rows]
					}
					this.hasMore = this.commentList.length < total
				} else {
					uni.showToast({
						title: res.data.msg || '获取评价失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				})
			}
		},
		
		// 获取评分图标
		getRatingIcon(type) {
			const icons = {
				service: '/static/rating/1.png',
				environment: '/static/rating/2.png',
				professional: '/static/rating/3.png',
				attitude: '/static/rating/4.png',
				overall: '/static/rating/5.png'
			}
			return icons[type] || icons.overall
		},
		
		// 获取媒体列表
		getMediaList(mediaUrls) {
			return mediaUrls ? mediaUrls.split(',') : []
		},
		
		// 获取仅图片的列表
		getImageList(mediaUrls) {
			return this.getMediaList(mediaUrls).filter(url => this.isImage(url))
		},
		
		// 判断是否为图片
		isImage(url) {
			const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
			return imageExtensions.some(ext => url.toLowerCase().endsWith(ext))
		},
		
		// 判断是否为视频
		isVideo(url) {
			const videoExtensions = ['.mp4', '.mov', '.avi', '.webm']
			return videoExtensions.some(ext => url.toLowerCase().endsWith(ext))
		},
		
		// 预览图片
		previewImage(urls, current) {
			uni.previewImage({
				urls: urls,
				current: current
			})
		}
	}
}
</script>

<style lang="scss">
.my-comment {
	min-height: 100vh;
	background: #F8F8F8;
	padding: 20rpx;
	
	.comment-list {
		.comment-item {
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.service-info {
				margin-bottom: 20rpx;
				
				.service-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10rpx;
					
					.service-name {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
					}
					
					.service-date {
						font-size: 26rpx;
						color: #999;
					}
				}
				
				.service-meta {
					font-size: 26rpx;
					color: #666;
					
					.technician {
						margin-left: 20rpx;
					}
				}
			}
			
			.rating-info {
				margin-bottom: 20rpx;
				
				.rating-item {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.rating-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					
					.stars {
						display: flex;
						
						.star {
							font-size: 36rpx;
							color: #DDDDDD;
							margin-right: 8rpx;
							
							&.active {
								color: #FFB800;
							}
						}
					}
				}
			}
			
			.comment-content {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				margin-bottom: 20rpx;
			}
			
			.media-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				
				.comment-image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
				}
				
				.comment-video {
					width: 400rpx;
					height: 300rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
	
	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style> 